import type { QuizHeaderProps } from './props'
import { Text, View } from '@tarojs/components'
import classNames from 'classnames'

export function QuizHeader({
  index,
  total,
  type,
  difficulty,
  category,
  tags,
  className,
}: QuizHeaderProps) {
  const getDifficultyColor = (difficulty?: string) => {
    switch (difficulty) {
      case 'easy':
        return '#10b981'
      case 'medium':
        return '#f59e0b'
      case 'hard':
        return '#ef4444'
      default:
        return '#6b7280'
    }
  }

  const getDifficultyText = (difficulty?: string) => {
    switch (difficulty) {
      case 'easy':
        return '简单'
      case 'medium':
        return '中等'
      case 'hard':
        return '困难'
      default:
        return ''
    }
  }

  return (
    <View className={classNames('mb-3', className)}>
      {/* 顶部信息 - 紧凑布局 */}
      <View className="flex flex-row items-center justify-between mb-2">
        <View className="flex flex-row items-center space-x-2">
          {index !== undefined && total !== undefined && (
            <Text className="text-xs font-medium text-gray-600">
              {index + 1}
              /
              {total}
            </Text>
          )}
          {difficulty && (
            <View
              className="px-1.5 py-0.5 rounded text-xs"
              style={{
                backgroundColor: `${getDifficultyColor(difficulty)}20`,
                color: getDifficultyColor(difficulty),
              }}
            >
              {getDifficultyText(difficulty)}
            </View>
          )}
        </View>

        <Text className="text-xs text-gray-500">
          {type === 'single' ? '单选' : '多选'}
        </Text>
      </View>

      {/* 分类和标签 - 换行显示，节省空间 */}
      {(category || (tags && tags.length > 0)) && (
        <View className="flex flex-row items-center space-x-2 flex-wrap">
          {category && (
            <Text className="text-xs text-blue-600 bg-blue-50 px-2 py-0.5 rounded">
              {category}
            </Text>
          )}
          {tags && tags.length > 0 && (
            <Text className="text-xs text-gray-500">
              {tags.slice(0, 3).join(' ')}
              {tags.length > 3 && ` +${tags.length - 3}`}
            </Text>
          )}
        </View>
      )}
    </View>
  )
}
